import SEO from "../components/SEO";

<SEO
	title="Skip Nav"
	description="Accessible skip-navigation-link React component for screen reader and keyboard users"
/>

# Skip Nav

- Source: https://github.com/reach/reach-ui/tree/main/packages/skip-nav
- WAI-ARIA: https://webaim.org/techniques/skipnav/

Skip navigation link for screen reader and keyboard users. Because the main content is not usually the first thing in the document, it's valuable to provide a shortcut for keyboard and screen reader users to skip to the content.

If the user does not navigate with the keyboard, they won't see the link.

For a demo, click some empty space on this page to move focus to the document body, then hit the "tab" key You'll see the link pop up. Hit enter, then tab again. Rather than cycling through the navigation, you are tabbing through the main content of the page.

```jsx
ReactDOM.render(
	<React.Fragment>
		{/* put the link at the top of your app */}
		<SkipNavLink />
		<div>
			<YourNav />
			{/* and the content next to your main content */}
			<SkipNavContent />
			<YourMainContent />
		</div>
	</React.Fragment>,
	rootNode
);
```

## Installation

From the command line in your project directory, run `npm install @reach/skip-nav` or `yarn add @reach/skip-nav`. Then import the components and styles:

```bash
npm install @reach/skip-nav
# or
yarn add @reach/skip-nav
```

```js
import { SkipNavLink, SkipNavContent } from "@reach/skip-nav";
import "@reach/skip-nav/styles.css";
```

## Component API

### SkipNavLink

Renders a link that remains hidden until focused to skip to the main content.

#### SkipNavLink CSS Selectors

```css
[data-reach-skip-link] {
}
[data-reach-skip-link]:focus {
}
```

#### SkipNavLink Props

| Prop                                   | Type     | Required | Default          |
| -------------------------------------- | -------- | -------- | ---------------- |
| [`a` props](#skipnavlink-anchor-props) |          |          | n/a              |
| [`contentId`](#skipnavlink-contentid)  | `string` | false    | 'reach-skip-nav' |
| [`children`](#skipnavlink-children)    | `node`   | false    | n/a              |

##### SkipNavLink anchor props

Element props are spread to the underlying link.

#### SkipNavLink `contentId`

You can pass an id that connects the skip link to the element where it should link to. You can use this instead of using `SkipNavContent`. For example:

```jsx
<SkipNavLink contentId="main" />
<div>
  <YourNav />
  <main id="main">
    //...
  </main>
</div>
```

##### SkipNavLink `children`

`children?: React.ReactNode`

Allows you to change the text for your preferred phrase or localization. If no children are passed, the link will display `Skip to content`.

```jsx
<SkipNavLink>saltar al contenido</SkipNavLink>
```

### SkipNavContent

Renders a div as the target for the link.

#### SkipNavLink Props

| Prop                                   | Type   | Required |
| -------------------------------------- | ------ | -------- |
| [`children`](#skipnavcontent-children) | `node` | false    |

##### SkipNavLink `children`

`children?: React.ReactNode`

You can place the `SkipNavContent` element as a sibling to your main content or as a wrapper:

```jsx
<SkipNavContent />
<YourMainContent />

// or

<SkipNavContent>
  <YourMainContent />
</SkipNavContent>
```

Keep in mind it renders a `div`, so it may mess affect your page styles depending on where it’s placed.
